
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>天气预告</title>
    <!--<link rel="icon" href="../../favicon.ico">-->
    <!-- Bootstrap core CSS -->
    <link href="./css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="./css/dashboard.css" rel="stylesheet">


    <script src="./assets/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <script src="./js/template-native.js"></script>



    <script id="template" type="text/html">
        <h1 class="page-header">[<%=today.city%>]今日天气状况</h1>
            <div class="col-xs-6 col-sm-3 placeholder">
                <img src="./images/wt.jpg" class="img-responsive">
                <h4>天气</h4>
                <span class="text-muted"><%=today.weather%></span>
            </div>
                <div class="col-xs-6 col-sm-3 placeholder">
                    <img src="./images/temp.jpg" class="img-responsive" >
                    <h4>温度</h4>
                    <span class="text-muted"><%=today.temperature%></span>
                </div>
                <div class="col-xs-6 col-sm-3 placeholder">
                    <img src="./images/wind.jpg" class="img-responsive" >
                    <h4>风向风级</h4>
                    <span class="text-muted"><%=today.wind%></span>
                </div>
                <div class="col-xs-6 col-sm-3 placeholder">
                    <img src="./images/wet.jpg" class="img-responsive" >
                    <h4>湿度</h4>
                    <span class="text-muted"><%=sk.humidity%></span>
                </div>
    </script>

    <script id="stemplate" type="text/html">

    <li class="active"><a href="#"><%=city%>空气概况</a></li>

    </script>
    <script id="ttemplate" type="text/html">

      <% for(var k in future) { %>
      <tr>
         <td><%=future[k].date%></td>
          <td><%=future[k].week%></td>
          <td><%=future[k].weather%></td>
          <td><%=future[k].temperature%></td>
          <td><%=future[k].wind%></td>
      </tr>
        <%}%>
    </script>

</head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
            </ul>
            <form class="navbar-form navbar-right">
                <input id="search" type="text" class="form-control" placeholder="搜索城市">
            </form>
        </div>
    </div>
</nav>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <ul class="nav nav-sidebar">
                <!--<li class="active"><a href="#">上海空气概况</a></li>-->
            </ul>

        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <!--<h1 class="page-header">今日天气状况</h1>-->

            <div class="row placeholders">
                <!--<h1 class="page-header">今日天气状况</h1>-->
               <!--template-->
            </div>

            <h2 class="sub-header">未来7天天气状况</h2>
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>日期</th>
                        <th>星期</th>
                        <th>天气</th>
                        <th>温度</th>
                        <th>风向风级</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>


<!--<script src="./jquery-1.12.0/jquery-1.12.0.min.js"></script>-->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script>
    $(function(){
        var rendhtml=function(v){
                $.ajax({
                    type:"get",
                    url:"http://v.juhe.cn/weather/index?cityname="+v+"&key=05bac3e389c2e21996424ee41cf68e1d&dtype=jsonp",
                    dataType:"jsonp",
                    success:function(data){
                        if(data.resultcode==200){
                            var html=template('template',data.result);
                            $(".placeholders").html(html);
                            var shtml=template("stemplate",data.result.today);
                            $('.nav-sidebar').html(shtml);
                            var thtml=template('ttemplate',data.result);
                            $('.table-striped tbody').html(thtml);
                        }else{
                            alert(data.reason);
                        }
                    }
                })
        }

        rendhtml("上海");

         $('#search').keyup(function(){
             var val=$('#search').val();
             if(val.length>=2){
                 rendhtml(val);
             }

         })
    })
</script>

<script src="./js/bootstrap.min.js"></script>
<script src="./assets/js/docs.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="./assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
